Into the ASP.NET MVC 3, It provides various helper methods that are used for different purposes.
The chart helper method is one of them, which makes it very easy to create charts in ASP.NET MVC. Into this article, I will show you that how you can use Chart helper in ASP.NET MVC. And at the same time, I will also show you how to use the theme provided by ASP.NET MVC to style your chart. And then I will show how to create a custom theme for making your chart background as transparent.
First of all Open visual studio 2010 and create a new ASP.NET MVC 3 Web Application (Razor) project as seen below:
Choose Razor as the view engine and click OK.
Add a controller in your project and give name as HomeController as shown in the below figure:
After adding a Controller adds the code as shown below:
using System.Web.Mvc;
using System.Web.Helpers;
namespace ChartDemo.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
public ActionResult Chart()
{
new Chart(width: 400, height: 200, theme: ChartTheme.Green)
.AddSeries(
chartType: "column",
xValue: new[] { "Math", "English", "Computer", "Science" },
yValues: new[] { "80", "90", "78", "68" })
.Write("png");
return null;
}
}
}
The chart is rendered as an image, to use the action you need to add an HTML
image to your page like this:
<html>
<head>
<title>Index</title>
</head>
<body>
<div>
<img src="@Url.Action("Chart")" alt="" />
</div>
</body>
</html>
The chart is displayed on the page as follows:
Now, let's add a custom theme which set the background color of your chart to
transparent and chart area background color to Aqua:
public ActionResult Chart()
{
string myTheme =
@"<Chart BackColor=""Transparent"" ForeColor=""Navy"">
<ChartAreas>
<ChartArea Name=""Default"" BackColor=""Aqua"" ></ChartArea> </ChartAreas>
</Chart>";
new Chart(width: 400, height: 200, theme: myTheme)
.AddSeries(
chartType: "column",
xValue: new[] { "Math", "English", "Computer", "Science" },
yValues: new[] { "80", "90", "78", "68" })
.Write("png");
return null;
}
Run this application again, you will see the following screen:
Thanks for reading this article and I think this will help you a lot.
[Read also this Article:- ToolBarTray Control in WPF]
Viresh Rajput
05-Apr-2012